﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link rel="stylesheet" href="/content/bootstrap.min.css">
    <link href="/Content/FooTable/footable.core.css" rel="stylesheet" type="text/css" />
    <link href="/Content/FooTable/footable.standalone.css" rel="stylesheet" type="text/css" />
    <link href="/Content/bootstrap-table.css" rel="stylesheet" type="text/css" />
    <script src="/scripts/jquery-2.1.4.min.js" type="text/javascript"></script>
    <script src="/Content/FooTable/footable.js" type="text/javascript"></script>
    <!--<script src="/Content/FooTable/footable.paginate.js" type="text/javascript"></script>-->
</head>
<body>
    <a href="#add" class="btn btn-info add-row">Add New Row</a>
    <br />
    <table class="table demo table-bordered">
        <thead>
            <tr>
                <th data-toggle="true">
                    First Name
                </th>
                <th data-hide="phone">
                    Last Name
                </th>
                <th data-hide="tablet,phone">
                    Job Title
                </th>
                <th data-hide="tablet,phone">
                    DOB
                </th>
                <th data-hide="tablet,phone">
                    Status
                </th>
                <th data-sort-ignore="true" data-hide="tablet,phone" data-name="Delete"></th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Isidra</td>
                <td><a href="#">Boudreaux</a></td>
                <td>Traffic Court Referee</td>
                <td data-value="78025368997">22 Jun 1972</td>
                <td data-value="1"><span class="status-metro status-active" title="Active">Active</span></td>
                <td><a class="row-delete" href="#"><span class="glyphicon glyphicon-remove"></span></a></td>
            </tr>
            <tr>
                <td>Shona</td>
                <td>Woldt</td>
                <td><a href="#">Airline Transport Pilot</a></td>
                <td data-value="370961043292">3 Oct 1981</td>
                <td data-value="2"><span class="status-metro status-disabled" title="Disabled">Disabled</span></td>
                <td><a class="row-delete" href="#"><span class="glyphicon glyphicon-remove"></span></a></td>
            </tr>
            <tr>
                <td>Granville</td>
                <td>Leonardo</td>
                <td>Business Services Sales Representative</td>
                <td data-value="-22133780420">19 Apr 1969</td>
                <td data-value="3"><span class="status-metro status-suspended" title="Suspended">Suspended</span></td>
                <td><a class="row-delete" href="#"><span class="glyphicon glyphicon-remove"></span></a></td>
            </tr>
            <tr>
                <td>Easer</td>
                <td>Dragoo</td>
                <td>Drywall Stripper</td>
                <td data-value="250833505574">13 Dec 1977</td>
                <td data-value="1"><span class="status-metro status-active" title="Active">Active</span></td>
                <td><a class="row-delete" href="#"><span class="glyphicon glyphicon-remove"></span></a></td>
            </tr>
            <tr>
                <td>Maple</td>
                <td>Halladay</td>
                <td>Aviation Tactical Readiness Officer</td>
                <td data-value="694116650726">30 Dec 1991</td>
                <td data-value="3"><span class="status-metro status-suspended" title="Suspended">Suspended</span></td>
                <td><a class="row-delete" href="#"><span class="glyphicon glyphicon-remove"></span></a></td>
            </tr>
            <tr>
                <td>Maxine</td>
                <td><a href="#">Woldt</a></td>
                <td><a href="#">Business Services Sales Representative</a></td>
                <td data-value="561440464855">17 Oct 1987</td>
                <td data-value="2"><span class="status-metro status-disabled" title="Disabled">Disabled</span></td>
                <td><a class="row-delete" href="#"><span class="glyphicon glyphicon-remove"></span></a></td>
            </tr>
            <tr>
                <td>Lorraine</td>
                <td>Mcgaughy</td>
                <td>Hemodialysis Technician</td>
                <td data-value="437400551390">11 Nov 1983</td>
                <td data-value="2"><span class="status-metro status-disabled" title="Disabled">Disabled</span></td>
                <td><a class="row-delete" href="#"><span class="glyphicon glyphicon-remove"></span></a></td>
            </tr>
            <tr>
                <td>Lizzee</td>
                <td><a href="#">Goodlow</a></td>
                <td>Technical Services Librarian</td>
                <td data-value="-257733999319">1 Nov 1961</td>
                <td data-value="3"><span class="status-metro status-suspended" title="Suspended">Suspended</span></td>
                <td><a class="row-delete" href="#"><span class="glyphicon glyphicon-remove"></span></a></td>
            </tr>
            <tr>
                <td>Judi</td>
                <td>Badgett</td>
                <td>Electrical Lineworker</td>
                <td data-value="362134712000">23 Jun 1981</td>
                <td data-value="1"><span class="status-metro status-active" title="Active">Active</span></td>
                <td><a class="row-delete" href="#"><span class="glyphicon glyphicon-remove"></span></a></td>
            </tr>
            <tr>
                <td>Lauri</td>
                <td>Hyland</td>
                <td>Blackjack Supervisor</td>
                <td data-value="500874333932">15 Nov 1985</td>
                <td data-value="3"><span class="status-metro status-suspended" title="Suspended">Suspended</span></td>
                <td><a class="row-delete" href="#"><span class="glyphicon glyphicon-remove"></span></a></td>
            </tr>
        </tbody>
        <tfoot class="hide-if-no-paging">
            <tr>
                <td colspan="6">
                    <div class="pagination pagination-centered"></div>
                </td>
            </tr>
        </tfoot>
    </table>
    <script type="text/javascript">
        $(function () {
            //$('.footable').footable();
            $('table').footable().on('click', '.row-delete', function (e) {
                e.preventDefault();
                //get the footable object
                var footable = $('table').data('footable');

                //get the row we are wanting to delete
                var row = $(this).parents('tr:first');

                //delete the row
                footable.removeRow(row);
            });

            $('.add-row').click(function (e) {
                e.preventDefault();

                //get the footable object
                var footable = $('table').data('footable');

                //build up the row we are wanting to add
                var newRow = '<tr><td>Tiennv</td><td><a href="#">Boudreaux</a></td><td>Traffic Court Referee</td><td data-value="78025368997">22 Jun 1972</td><td data-value="1"><span class="status-metro status-active" title="Active">Active</span></td><td><a class="row-delete" href="#"><span class="glyphicon glyphicon-remove"></span></a></td></tr>';
                newRow += newRow;
                //$(".footable>tbody>tr").each(function (index, elem) {
                //    $(elem).remove();
                //});
                //add it
                //footable.appendRow(newRow);
                footable.prependRow(newRow);
                //$('table > tbody').prepend(newRow);

                //setTimeout(function () { $('table').footable(); }, 1000);
                //footable.trigger('footable_redraw');
            });
        });
    </script>

</body>
</html>
